<template>
	<div class="h-12 flex items-center gap-6">
		<base-icon
			v-for="item in tabList"
			:key="item.code"
			:name="item.icon"
			size="28"
			class="duration-200 transition-all app-text-react"
			:class="tab === item.code ? 'text-primary' : 'text-t-3'"
			@click="onSelect(item.code)"></base-icon>
	</div>
</template>

<script lang="ts" setup>
import { BaseIcon } from '@/components/base'
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useSportsStore } from '@/store'

defineProps({
	tab: {
		type: String,
		required: true
	}
})

const router = useRouter()

const sportsStore = useSportsStore()

const fixTabList = [
	{
		code: 'home',
		icon: 'home'
	},
	{
		code: 'live',
		icon: 'zd-live'
	}
]

const tabList = computed(() => [...fixTabList, ...sportsStore.sportList])

const onSelect = (code: string) => {
	if (code === 'home') {
		router.push('/sports')
	} else if (code === 'live') {
		router.push('/sports-live')
	} else {
		router.push('/sports/' + code)
	}
}
</script>
